import React, { Component } from "react";
import store from "./store";
import { connect } from "react-redux";
class ReactReduxTodo extends Component {
//   constructor(props) {
//     super(props);
//     this.state = store.getState();
//   }

  render() {
    return (
      <div>
        <div>
          <input
            onChange={this.props.changInputValue}
            value={this.props.inputValue}
          />
          <button onClick={this.props.handleClick}>提交</button>
        </div>
        <ul>{
            this.props.list.map((item,index)=>{
                return <li key={index} onClick={this.props.handleDelete}>{item}</li>
            })
            }</ul>
      </div>
    );
  }
}

// 规则将state中的数据映射到props
const mapStateToProps = state => {
  return {
    inputValue: state.inputValue,
    list: state.list
  };
};

const mapDispatchToProps = dispatch => {
  return {
    changInputValue(e) {
      const action = {
        type: "changeinputvalue",
        value: e.target.value
      };
      dispatch(action);
    },
    handleClick(){
        const action = {
            type:'submitinpuvalue'
        }
        dispatch(action)
    },
    handleDelete(index){
        const action = {
            type:'deleteinputvalue',
            index:index
        }
        dispatch(action)
    }
  };
};

// 当前组件和store根据mapstatetoprops的规则连接
export default connect(mapStateToProps, mapDispatchToProps)(ReactReduxTodo);
